<template>
  <div id="returnVisit">
    <header>
      <i @click="goBack()"></i>
      <div>回访管理</div>
      <span @click='addReturnVisit'>新建</span>
    </header>
    <div class="nav">
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
        <a class="">
          <b>待回访</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>回访完成</b>
        </a>
      </div>
      <div @click='tabToggle(2,sentPage,"click")'>
        <a class="">
          <b>未完成</b>
        </a>
      </div>
      <div @click='tabToggle(3,sentPage,"click")'>
        <a class="">
          <b>已取消</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <img src="../../image/no_record@2x.png" width='74' alt="">
        <p>目前还没有任何回访记录!</p>
      </div>
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <ul class="list">
          <li v-for="(item,index) in list" :key='index'>
            <router-link :to='{name:"addReturnVisit",query:{status:"details",id: item.id}}'>
              <ul>
                <li>
                  <span class='bold'>
                    {{item.time}} {{item.time | getDay}}
                    <!-- <i class='yellow' v-show='type=="待计划"'>待计划</i> -->
                  </span>
                  <span>{{item.pname}}</span>
                  <span>{{item.sex}}</span>
                  <span>{{item.tele}}</span>
                </li>
                <li class='noPadding'>
                  <span class='border'>内容</span>
                  <div>
                    {{item.content}}
                  </div>
                </li>
                <li class='noPadding'>
                  <span class='border'>结果</span>
                  <div>
                    {{item.result}}
                  </div>
                </li>
              </ul>
            </router-link>
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        userid: '',
        type: '待回访',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        user: '', //判断入口 医生or诊室
      }
    },
    components: {
      Loadmore,
    },
    filters: {
      getDay: function (val) { //返回星期几
        var d = new Date(val);
        var weekday = new Array(7)
        weekday[0] = "星期天"
        weekday[1] = "星期一"
        weekday[2] = "星期二"
        weekday[3] = "星期三"
        weekday[4] = "星期四"
        weekday[5] = "星期五"
        weekday[6] = "星期六"
        return weekday[d.getDay()]
      }
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'appointmentTime',
          query: {
            user: this.$route.query.user
          }
        });

      },
      //新建回访
      addReturnVisit() {
        this.$router.push({
          name: 'addReturnVisit',
          query: {
            status: 'add'
          }
        });
      },
      //判断入口 是医生的订单管理 还是诊室的订单管理 获取对应状态的订单列表
      tabToggle(i, params, click) { //0已完成 1未完成
        const arr = ["待回访", "回访完成", "未完成", "已取消"];
        this.type = arr[i];
        $('.nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        this.userid = localStorage.getItem("loginMobile");

        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_returnvisit/0?doctorid=" + this.userid +
          "&type=" + this.type, params, r => {
            this.totalNum = r.data.records; //总数据
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
          }, err => {
            console.log(err);
          })
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == '待回访') {
          setTimeout(() => {
            this.tabToggle(0, this.sentPage);
          }, 20);
        } else if (this.type == "回访完成") {
          setTimeout(() => {
            this.tabToggle(1, this.sentPage);
          }, 20);
        } else if (this.type == "未完成") {
          setTimeout(() => {
            this.tabToggle(2, this.sentPage);
          }, 20);
        } else if (this.type == "已取消") {
          setTimeout(() => {
            this.tabToggle(3, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },

    },
    created() {
      this.tabToggle(0, this.sentPage);
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 115px;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
      font-size: 17px;
      color: rgba(51, 51, 51, 1);
    }
  }

</style>
